<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增案件信息')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-info-add" th:object="${vo}">
            <input id="caseId" name="caseId" type="hidden" th:field="*{caseId}"/>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">案件名称：</label>
                <div class="col-sm-8">
                    <input name="caseName" class="form-control" type="text" th:field="*{caseName}" required>
                </div>
            </div>
 
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">委托方: </label>
                <div class="col-sm-8">
                    <table class="table table-sm" id="bootstrap-table-principal" data-show-header="false">
                    <input id="principal_cur_idx" type="hidden" value=""/>
                    <caption>
	                    <button type="button" class="btn btn-white btn-sm" onclick="addRow_principal()"><i class="fa fa-plus"> 增加</i></button>
                    </caption>
                    </table>
                </div>
            </div>
 
            <div class="form-group">
                <label class="col-sm-3 control-label">利益相对方: </label>
                <div class="col-sm-8">
                    <table class="table table-sm" id="bootstrap-table-oppositor" data-show-header="false">
                    <input id="oppositor_cur_idx" type="hidden" value=""/>
                    <caption>
	                    <button type="button" class="btn btn-white btn-sm" onclick="addRow_oppositor()"><i class="fa fa-plus"> 增加</i></button>
                    </caption>
                    </table>
                </div>
            </div>
            
            <div class="form-group">    
                <label class="col-sm-3 control-label">第三方：</label>
                <div class="col-sm-8">
                    <input name="caseName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">案件类型：</label>
                    <div id="element_ct" class="row">
                        <div class="col-sm-2">
                            <select class="type form-control m-b" th:field="*{caseTypeId}" data-first-title="请选择">
			                  <option value="">请选择</option>
			                  <option th:value="*{caseTypeId}" th:selected="1"></option>
			                </select>
		                </div>
                        <div class="col-sm-2">
						&nbsp;&nbsp;&nbsp;&nbsp;诉讼类型：
		                </div>
		                <div class="col-sm-2">
			                <select class="router form-control m-b" th:field="*{litigateTypeId}" data-first-title="请选择">
			                  <option value="">请选择</option>
			                  <option th:value="*{litigateTypeId}" th:selected="1"></option>
			                </select>
		                </div>
						
                	</div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="remark" class="form-control" type="text" th:field="*{remark}">
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jquery-cxselect-js" />
    
    <script th:inline="javascript">
    $(function() {
		var data = [[${vo.principal}]];
    	var options = {
		    id: "bootstrap-table-principal",
	    	data: data,
            pagination: false,
	        showSearch: false,
            showRefresh: false,
            showToggle: false,
            showToolbar: false,
            showColumns: false,
            /* showHeader:false, */
            sidePagination: "client",
	        columns: [
	 	        {
		        	field: 'index',
		        	align: 'center',
	                formatter: function (value, row, index) {
	                	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
	                	var caseCustIndex = $.common.sprintf("<input type='hidden' name='principal[%s].caseCustIndex' value='%s'>", index, index);
	                	var caseCustType = $.common.sprintf("<input type='hidden' name='principal[%s].caseCustType' value='%s'>", index, 1);
	                	var custId = $.common.sprintf("<input type='hidden' name='principal[%s].custId' id='principal[%s].custId' value='%s'>", index, index, row.custId);
	                	var custName = $.common.sprintf("<input type='hidden' name='principal[%s].custName' id='principal[%s].custName' value='%s'>", index, index, row.custName);
	                	var certNo = $.common.sprintf("<input type='hidden' name='principal[%s].certNo' id='principal[%s].certNo' value='%s'>", index, index, row.certNo);
	                	var custType = $.common.sprintf("<input type='hidden' name='principal[%s].custType' id='principal[%s].custType' value='%s'>", index, index, row.custType);
		            	return columnIndex + $.table.serialNumber(index) + caseCustIndex + caseCustType + custId + custName + certNo + custType;
	                }
	            },
		        {
	                align: 'center',
	                formatter: function(value, row, index) {
	                	var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
	                    var actions = [];
	                    var textCustSelect = null;
	                    if (row.custId == '') {
	                    	textCustSelect = $.common.sprintf("<input type='text' name='custSelect' id='custSelect_principal_%s' class='form-control' readonly='true' value=''>", 
	                    			index);
	                    } else {
	                    	textCustSelect = $.common.sprintf("<input type='text' name='custSelect' id='custSelect_principal_%s' class='form-control' readonly='true' value='%s-%s'>", 
	                    			index, row.custName, row.certNo);
	                    }
		            	var textCustSelect_html = $.common.sprintf("<div class='form-group'>%s</div>", textCustSelect);
		            	actions.push(textCustSelect_html);
		            	actions.push(' ');
	                    actions.push('<div class="form-group">');
		            	actions.push(' ');
			            var btnCustSelect = 
		            		$.common.sprintf(
		            		"<a class='btn btn-success btn-xs' href='javascript:void(0)' onclick='selectUserInfo_principal(%s)'><i class='fa fa-search'></i>客户</a> ", index);
		            	actions.push(btnCustSelect);
		            	actions.push(' ');
	                    actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>');
			            	
		            	actions.push('</div> ');
	                    return actions.join('');
	                }
	            }
	        ]
	    };
	    $.table.init(options);
	});
    </script>
    
    <script th:inline="javascript">
    $(function() {
		var data = [[${vo.oppositor}]];
		var options = {
		    id: "bootstrap-table-oppositor",
	    	data: data,
            pagination: false,
	        showSearch: false,
            showRefresh: false,
            showToggle: false,
            showToolbar: false,
            showColumns: false,
            /* showHeader:false, */
            sidePagination: "client",
	        columns: [
	 	        {
		        	field: 'index',
		        	align: 'center',
	                formatter: function (value, row, index) {
	                	var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
	                	var caseCustIndex = $.common.sprintf("<input type='hidden' name='oppositor[%s].caseCustIndex' value='%s'>", index, index);
	                	var caseCustType = $.common.sprintf("<input type='hidden' name='oppositor[%s].caseCustType' value='%s'>", index, 2);
	                	var custId = $.common.sprintf("<input type='hidden' name='oppositor[%s].custId' id='oppositor[%s].custId' value='%s'>", index, index, row.custId);
	                	var custName = $.common.sprintf("<input type='hidden' name='oppositor[%s].custName' id='oppositor[%s].custName' value='%s'>", index, index, row.custName);
	                	var certNo = $.common.sprintf("<input type='hidden' name='oppositor[%s].certNo' id='oppositor[%s].certNo' value='%s'>", index, index, row.certNo);
	                	var custType = $.common.sprintf("<input type='hidden' name='oppositor[%s].custType' id='oppositor[%s].custType' value='%s'>", index, index, row.custType);
		            	return columnIndex + $.table.serialNumber(index) + caseCustIndex + caseCustType + custId + custName + certNo + custType;
	                }
	            },
	 	        {
		        	align: 'center',
	                formatter: function (value, row, index) {
		            	var textCustSelect = null;
	                    if (row.custId == '') {
	                    	textCustSelect = $.common.sprintf("<input type='text' name='custSelect' id='custSelect_oppositor_%s' class='form-control' readonly='true' value=''>", 
	                    			index);
	                    } else {
	                    	textCustSelect = $.common.sprintf("<input type='text' name='custSelect' id='custSelect_oppositor_%s' class='form-control' readonly='true' value='%s-%s'>", 
	                    			index, row.custName, row.certNo);
	                    }
		            	var html = $.common.sprintf("<div class='form-group'>%s</div>", textCustSelect);
						return html;
	                }
	            },
		        {
	                align: 'center',
	                formatter: function(value, row, index) {
	                	var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
	                    var actions = [];
	                    actions.push('<div class="form-group">');
		            	actions.push(' ');
			            var btnCustSelect = 
		            		$.common.sprintf(
		            		"<a class='btn btn-success btn-xs' href='javascript:void(0)' onclick='selectUserInfo_oppositor(%s)'><i class='fa fa-search'></i>客户</a> ", index);
		            	actions.push(btnCustSelect);
		            	actions.push(' ');
	                    actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>');
			            	
		            	actions.push('</div> ');
	                    return actions.join('');
	                }
	            }
            ]
	    };
	    $.table.init(options);
	});
    </script>
        
    <script th:inline="javascript">
	    function addRow(tableId) {
	    	var count = $("#" + tableId).bootstrapTable('getData').length;
	    	var newRow = {
	            index: $.table.serialNumber(count),
	        	custId: "",
	        	custName: "",
	        	certNo: "",
	        	custType: "",
	        }
	    	$("#" + tableId).bootstrapTable('append', newRow);
	    }
	    function addRow_principal() {
	    	var count = $("#bootstrap-table-principal").bootstrapTable('getData').length;
	    	var row = {
	            index: $.table.serialNumber(count),
	        	custId: "",
	        	custName: "",
	        	certNo: "",
	        	custType: "",
	        }
	    	$("#bootstrap-table-principal").bootstrapTable('append', row);
	    }
	    function addRow_oppositor() {
	    	var count = $("#bootstrap-table-oppositor").bootstrapTable('getData').length;
	    	var row = {
	            index: $.table.serialNumber(count),
	        	custId: "",
	        	custName: "",
	        	certNo: "",
	        	custType: "",
	        }
	    	$("#bootstrap-table-oppositor").bootstrapTable('append', row);
	    }
    </script>
    
    <script th:inline="javascript">
        var prefix = ctx + "biz/caseinfo"
        $("#form-info-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var data = $("#form-info-add").serializeArray();
                $.operate.saveTab(prefix + "/add", data);
            }
        }
   </script>
        
   <script th:inline="javascript">
        /* 客户管理-新增-选择客户 */
        function selectUserInfo_principal(idx) {
        	$("#principal_cur_idx").val("mytext");
        	$("#principal_cur_idx").val(idx);
        	var url = ctx + "crm/custinfo/choice";
			var options = {
				title: '选择客户',
				width: "680",
				url: url,
				callBack: doSubmitUserInfo_principal
			};
			$.modal.openOptions(options);
		}
        
        /* 选择客户后，进行相应的赋值 */
		function doSubmitUserInfo_principal(index, layero){
			var body = $.modal.getChildFrame(index);
			var cur_idx = $("#principal_cur_idx").val();
			/* set val */
			var custId_n = $.common.sprintf('#principal[%s].custId', cur_idx);
			var custName_n = $.common.sprintf('#principal[%s].custName', cur_idx);
			var certNo_n = $.common.sprintf('#principal[%s].certNo', cur_idx);
			var custType_n = $.common.sprintf('#principal[%s].custType', cur_idx);
			
			let custId = body.find('#custId').val();
			let custName = body.find('#custName').val();
			let certNo = body.find('#certNo').val();
			let custType = body.find('#custType').val();
			
   			$(custId_n).val(custId);
   			$(custName_n).val(custName);
   			$(certNo_n).val(certNo);
   			$(custType_n).val(custType);

			var custSelect_n = $.common.sprintf('#custSelect_principal_%s', cur_idx);
			var cs_val = $.common.sprintf('(%s-%s-%s-%s)', custId, custName, certNo, custType);
			$(custSelect_n).val(cs_val);
   			$.modal.close(index);
		}
   </script>
            
   <script th:inline="javascript">
        /* 客户管理-新增-选择客户 */
        function selectUserInfo_oppositor(idx) {
        	$("#oppositor_cur_idx").val("mytext");
        	$("#oppositor_cur_idx").val(idx);
        	var url = ctx + "crm/custinfo/choice";
			var options = {
				title: '选择客户',
				width: "680",
				url: url,
				callBack: doSubmitUserInfo_oppositor
			};
			$.modal.openOptions(options);
		}
        
        /* 选择客户后，进行相应的赋值 */
		function doSubmitUserInfo_oppositor(index, layero){
			var body = $.modal.getChildFrame(index);
			var cur_idx = $("#oppositor_cur_idx").val();
			/* set val */
			var custId_n = $.common.sprintf('#oppositor[%s].custId', cur_idx);
			var custName_n = $.common.sprintf('#oppositor[%s].custName', cur_idx);
			var certNo_n = $.common.sprintf('#oppositor[%s].certNo', cur_idx);
			var custType_n = $.common.sprintf('#oppositor[%s].custType', cur_idx);
			
			let custId = body.find('#custId').val();
			let custName = body.find('#custName').val();
			let certNo = body.find('#certNo').val();
			let custType = body.find('#custType').val();
			
   			$(custId_n).val(custId);
   			$(custName_n).val(custName);
   			$(certNo_n).val(certNo);
   			$(custType_n).val(custType);

			var custSelect_n = $.common.sprintf('#custSelect_oppositor_%s', cur_idx);
			var cs_val = $.common.sprintf('(%s-%s-%s-%s)', custId, custName, certNo, custType);
			$(custSelect_n).val(cs_val);
   			$.modal.close(index);
		}
   </script>
    
</body>
</html>